<template>
  <div class="box">
    <div class="title">订单</div>
    <div class="say">想对你说</div>
    <div class="goodsOrder">
      <span @click="isShow" :class="{default:showBorder}">当前订单</span>
      <span @click="isShow1" :class="{default:isShowBorder}">历史订单</span>
    </div>
    <!-- 当前订单 -->
    <div class="content" v-show="currentDom">
      <div>
        <img src="/img/Order/5.gif" alt="动图" class="img" />
      </div>
      <div class="noOrder">
        <p>您今天还没有下单</p>
        <p>快去选择一杯喜欢的茶吧</p>
      </div>
      <div class="goSpend">
        <div>去点单</div>
      </div>
    </div>
    <!-- 历史订单 -->
    <div class="content2" v-show="historyDom">
      <div class="historyOrder">
        <div class="current">门店订单</div>
        <div>百货订单</div>
        <div class="inVoice">开发票</div>
      </div>
      <div class="content3">
        <div>
          <img src="/img/Order/6.png" alt="动图" class="img" />
        </div>
        <div class="noOrder">
          <p>您今天还没有下单</p>
          <p>快去选择一杯喜欢的茶吧</p>
        </div>
        <div class="goSpend">
          <div>去点单</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentDom: true,
      historyDom: false,
      showBorder:true,
      isShowBorder:false
    };
  },
  methods: {
    isShow() {
      this.currentDom = true,
      this.historyDom = false;
      this.showBorder=true,
      this.isShowBorder=false
    },
    isShow1() {
      this.currentDom = false, 
      this.historyDom = true;
      this.showBorder=false,
      this.isShowBorder=true
    }
  }
};
</script>
<style scoped>

.title {
  width: 100%;
  height: 0.58rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.6rem;
  font-weight: 600;
  font-size: 0.12rem;
  position: relative;
}
.say {
  width: 0.68rem;
  height: 0.24rem;
  border-radius: 0.16rem;
  border: 0.01rem solid black;
  font-size: 0.1rem;
  line-height: 0.24rem;
  text-align: center;
  position: absolute;
  left: 80%;
  top: 0.16rem;
}
.goodsOrder {
  width: 100%;
  height: 0.38rem;
  background-color: #fff;
  font-size: 0.12rem;
  line-height: 0.38rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  border-bottom: 0.01rem solid #e3e3e3;
}
.default{
  display: inline-block;
  width: auto;
  border-bottom: 0.02rem solid #000;
  padding: 0rem 0.04rem;
}
.default1{
  display: inline-block;
  width: auto;
  border-bottom: 0.02rem solid #000;
  padding: 0rem 0.04rem;
}
.content {
  width: 100%;
}
.noOrder {
  width: 100%;
  height: 0.32rem;
  /* background-color: cadetblue; */
  font-size: 0.12rem;
  color: #515151;
  text-align: center;
  line-height: 0.16rem;
  margin-top: 3.4rem;
  margin-bottom: 0.3rem;
}
.goSpend {
  width: 100%;
  height: 0.36rem;
}
.goSpend div {
  width: 1.64rem;
  height: 0.36rem;
  border-radius: 0.18rem;
  background-color: #111111;
  color: white;
  line-height: 0.36rem;
  text-align: center;
  font-size: 0.12rem;
  margin: auto;
}
.content2 {
  width: 100%;
  height: 500px;
  /* background-color: blue; */
}
.historyOrder {
  height: 0.42rem;
  /* background-color: blueviolet; */
  display: flex;
  align-items: center;
  font-size: 0.1rem;
  position: relative;
}
.current {
  width: 0.62rem;
  height: 0.25rem;
  font-size: 0.1rem;
  font-weight: 500;
  border-radius: 0.1rem;
  background-color: #fff;
  text-align: center;
  line-height: 0.25rem;
  margin-right: 0.2rem;
  margin-left: 0.14rem;
}
.inVoice {
  position: absolute;
  left: 3.1rem;
  top: 0.2rem;
  line-height: 0.04rem;
}
.img {
  width: 1.44rem;
  height: 1.44rem;
  position: absolute;
  top: 2.7rem;
  left: 50%;
  transform: translateX(-50%);
}
</style>